<template>
	<view class="content">
		<view class="head">
			<image src="../../static/headBack.png" mode="aspectFit"></image>
		</view>
		<view class="detail">
			<view class="de_nav">
				<view>
					缴费项目
				</view>
				<view class="price">
					缴费金额
				</view>
				<view>
					支付时间
				</view>
			</view>
			<view class="de_list" v-for="(item,index) in list" :key="index" @click="$framDate.navTo('record/detail?id='+item.id)">
				<view>
					{{item.project_name}}
				</view>
				<view class="price">
					{{item.money}}
				</view>
				<view>
					{{item.pay_time}}
				</view>
			</view>
			<view class="de_img" v-if="list.length == 0">
				<image src="../../static/clears.png" mode="heightFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				objPage: {
					page: 1,
					limit: 10
				},
				list: [],
				loading: true
			}
		},
		onLoad() {
			this.load();
		},
		onReachBottom() {
			this.objPage.page += 1;
			this.load();
		},
		methods:{
			async load(){
				if(!this.loading){
					return
				}
				let res = await this.api.uniRequ(this.api.public.order_list,this.objPage);
				if(res.code == 1){
					this.list = this.list.concat(res.data.data);
					if(this.list.length != this.objPage.limit){
						this.loading = false;
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.detail{
		width: 90%;
		padding: 12rpx 0;
		position: relative;
		z-index: 1;
		left: 5%;
		top: -150rpx;
		border-radius: 8rpx;
		background-color: #FFFFFF;
		box-shadow: 0px -5rpx 20rpx rgba(0, 0, 0, 0.1);
		.de_nav{
			width: 100%;
			height: 81rpx;
			line-height: 81rpx;
			font-size: 26rpx;
			display: flex;
			text-align: center;
			color: #262628;
			border-bottom: 1px solid #EFEFF4;
			view{
				width: 40%;
			}
			.price{
				width: 20%;
			}
		}
		.de_list{
			width: 100%;
			line-height: 87rpx;
			font-size: 26rpx;
			display: flex;
			text-align: center;
			color: #707080;
			view{
				width: 40%;
			}
			.price{
				width: 20%;
			}
		}
		.de_img{
			width: 100%;
			text-align: center;
			min-height: 650rpx;
			image{
				margin-top: 150rpx;
				height: 350rpx;
			}
		}
	}
</style>
